<template>
	<view class="content">
		<view class="bg-white top">
			<view class="list flexs1">
				<view class="list_left">姓名</view>
				<view class="list_right">
					<input placeholder="请输入您的姓名" v-model="name"/>
				</view>
			</view>
			<view class="list flexs1">
				<view class="list_left"></view>
				<radio-group class="list_right radios text-left flexs3" @change="RadioChange">
					<view class="flexs3">
						<radio class='orange' :class="radio=='A'?'checked':''" :checked="radio=='A'?true:false" value="A"></radio>
						<view class="rFlexs3">男</view>
					</view>
					<view class="flexs3 rFlexs3">
						<radio class='orange' :class="radio=='B'?'checked':''" :checked="radio=='B'?true:false" value="B"></radio>
						<view class="rFlexs3">女</view>
					</view>
				</radio-group>
			</view>
			<view class="list flexs1">
				<view class="list_left">手机号</view>
				<view class="list_right">
					<input placeholder="请输入您的手机号" v-model="mobile"/>
				</view>
			</view>
			<view class="list list2 flexs1">
				<view class="list_left">地址</view>
				<view class="list_right">
					<textarea placeholder="请输入您的详细地址" v-model="address"></textarea>
				</view>
			</view>
			<view class="list list3 flexs1">
				<view class="">是否设为默认地址</view>
				<switch class='cyan' @change="SwitchA" :class="switchA?'checked':''" :checked="switchA?true:false"></switch>
			</view>
		</view>
		<view class="btns text-white text-bold text-center" @click="editaddress">保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radio: 'A',
				switchA: false,
				name:'',
				sex:1,
				mobile:'',
				address:'',
				is_default:1,
				address_id:'',
				is_select:0
				
			}
		},
		onLoad(option) {
			if(option.address_id){
				this.address_id = option.address_id;
			}
			if(option.is_select){
				this.is_select = option.is_select;
			}
			this.initdata();
		},
		onShow() {
			this.initdata();
		},
		methods: {
			initdata(){
				if(!this.address_id){
					return ;
				}
				var obj={
					address_id:this.address_id,
				}
				this.$common.requests('/api/shop/addressinfo',obj).then(res =>{
					if(res.data.code == 1){
						this.name = res.data.data.name;
						this.mobile = res.data.data.mobile;
						this.sex = res.data.data.sex;
						if(this.sex==1){
							this.radio='A';
						}else{
							this.radio='B';
						}
						this.address = res.data.data.address;
						this.is_default = res.data.data.is_default;
						if(this.is_default==1){
							this.switchA=false;
						}else{
							this.switchA=true;
						}
					}else{
						this.$api.msg(res.data.msg)
					}
				})
			},
			RadioChange(e) {
				this.radio = e.detail.value
				console.log(this.radio)
				if(this.radio=='A'){
					this.sex = 1;
				}else{
					this.sex = 2;
				}
			},
			SwitchA(e) {
				this.switchA = e.detail.value
				console.log(this.switchA)
				if(this.switchA){
					this.is_default = 2;
				}else{
					this.is_default = 1;
				}
			},
			editaddress(){
				var obj={
					address_id:this.address_id,
					name:this.name,
					sex:this.sex,
					mobile:this.mobile,
					address:this.address,
					is_default:this.is_default
				}
				this.$common.requests('/api/shop/editaddress',obj).then(res =>{
					if(res.data.code == 1){
						this.$api.msg(res.data.msg)
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/address/address?is_select='+this.is_select
							})
						}, 800);
					}else{
						this.$api.msg(res.data.msg)
					}
				})
			}
		}
	}
</script>

<style>
	.content{
		background: #F9F9F9;
		width: 100vw;
		height: 100vh;
	}
	.top{
		padding: 0 30upx;
		border-top: 1px solid #E6E6E6;
		color: #333333;
	}
	.list{
		padding: 30upx 0;
		border-bottom: 1px solid #E6E6E6;
	}
	.list2{
		align-items: flex-start!important;
	}
	.list3{
		border-bottom: none;
	}
	.list_left{
		width: 25%;
	}
	.list_right{
		width: 75%;
	}
	.list_right input{
		width: 100%;
		padding-top: 6upx;
	}
	.list_right textarea{
		width: 100%;
		height: 100upx;
		padding-top: 50upx;
	}
	.orange{
		transform: scale(0.7);
		margin-right: 10upx;
	}
	.rFlexs3{
		width: 90upx;
		margin-bottom: 5upx;
	}
	.cyan{
		transform: scale(0.7);
	}
	uni-radio.checked .uni-radio-input{
		background: #F8774B!important;
	}
	.btns{
		width: 76%;
		padding: 25upx 0;
		background: #14C7CE;
		border-radius: 15upx;
		margin: 50upx 12%;
		font-size: 30upx;
	}
</style>
